<template>
	<view>
		<view class="info">
			<view class="empty-item" v-if="!historyList.length">
				<u-empty mode="history" text="暂无足迹" margin-top="200"></u-empty>
			</view>
			<view v-else>
				<view class="clear">
					<u-button icon="trash" @click="clearHistory">清空</u-button>
				</view>
				<view v-for="item in historyList" :key="item.goodsId">
					<van-swipe-cell right-width="65" @click="item.isDonation==0 ? NeedDetail(item) : DonateDetail(item)">
						<view class="item">
							<image :src="item.picture">
							</image>
							<view class="right">
								<span class="bookTitle">
									{{item.title}}
								</span>
								<span class="author">
									新旧程度: {{item.author}}
								</span>
								<span class="message">
									{{item.goodsDesc}}
								</span>
							</view>
							<view class="tag">
								<u-tag text="收" plain size="mini" type="warning" v-if="item.isDonation==0"></u-tag>
								<u-tag text="捐" plain size="mini" type="success" v-else></u-tag>
							</view>
						</view>
						<view slot="right" class="delete" @click.stop="deleteHistory(item.goodsId)">
							<u-button type="error" text="删除"></u-button>
						</view>
					</van-swipe-cell>
				</view>
				<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historyList: [],
				page: 1,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				status: 'loading',
				isBottomRefresh: false,
			}
		},
		onShow() {
			this.getHistoryList()
		},
		onReachBottom() {
			// 每次页面触底调用方法读取更多数据
			this.page++ //每次触底查询页码加一
			this.isBottomRefresh = true //标识是捐赠列表触底操作
			setTimeout(() => {
				if (this.status == 'noMore') return // 没有更多数据之后 就不会在触底加载
				this.getHistoryList()
			}, 500)
		},
		methods: {
			// 获取足迹列表
			async getHistoryList() {
				var that = this;
				var {
					data: res
				} = await this.$myRequest({
					url: '/CollHis/checkHis/' + uni.getStorageSync('userId') + '/' + that.page + '/10',
				})
				console.log(res);
				if (res.code == 20000) {
					if (this.isBottomRefresh) { //判断是第一次获取数据还是触底加载新数据
						this.historyList = this.historyList.concat(res.data.list)
					} else {
						this.historyList = res.data.list
					}
					this.ifBottomRefresh = false
					console.log(this.historyList);
				}
				this.status = this.historyList.length < res.data.total ? 'loading' : 'noMore'

			},
			// 根据id删除单条历史记录
			async deleteHistory(id){
				console.log(id);
				let {data:res} = await this.$myRequest({
					url:'/CollHis/deleteHis/'+uni.getStorageSync('userId')+'/'+id,
					method:'delete'
				})
				if(res.code===20000){
					uni.showToast({
						title:'删除成功!',
						icon:'none'
					})
					this.getHistoryList()
				}
			},
			// 清空所有历史记录
			clearHistory(){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认清空足迹吗？',
					success: async function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let {data:data} = await that.$myRequest({
								url:'/CollHis/deleteAllHis/'+uni.getStorageSync('userId'),
								method:'delete'
							})
							if(data.code==20000){
								uni.showToast({
									title:'删除成功',
									icon:'none'
								})
								that.historyList=[]
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 跳转到捐赠详情页
			DonateDetail(info) {
				uni.navigateTo({
					url: '/page_index/DonateDetail?info=' + encodeURIComponent(JSON.stringify(info))
				})
			},
			// 跳转到需求详情页
			NeedDetail(info) {
				uni.navigateTo({
					url: '/page_index/NeedDetail?info=' + encodeURIComponent(JSON.stringify(info))
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.info {
		.item {
			background-color: #fff;
			height: 250rpx;
			display: flex;
			border-bottom: 1rpx solid lightgray;
		}


		image {
			width: 160rpx;
			height: 200rpx;
			margin: 20rpx 20rpx;
		}

		.right {
			margin-left: 20rpx;
			width: 65%;

			.bookTitle {
				display: block;
				color: #d81e06;
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.author {
				display: block;
				font-size: 24rpx;
				color: gray;
				margin-top: 20rpx;
			}

			.message {
				font-size: 24rpx;
				margin-top: 20rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
			}
		}
		.tag {
			margin-right: 20rpx;
			margin-top: 190rpx;
		}
		.clear {
			/deep/.u-button {
				width: 200rpx;
				margin-top: 10rpx;
				margin-right: 10rpx;
			}
		}

		.delete {
			background-color: red;
			display: flex;
			align-items: center;

			/deep/.u-button {
				height: 250rpx;
			}
		}
	}
</style>
